<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
<body>
	<h2>Client Side Pagination in DataGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>This sample shows how to implement client side pagination
			in DataGrid.</div>
	</div>
	<div style="margin:10px 0;"></div>

	<table id="dg" title="Client Side Pagination"
		style="width:700px;height:300px"
		data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:true,
				pagination:true,
				pageSize:10">
		<thead>
			<tr>
				<th field="id" width="80">Id</th>
				<th field="username" width="100">用户名</th>
				<th field="account" width="80" align="right">账号</th>
				<th field="password" width="80" align="right">密码</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript">
		function getData() {
			var rows = [];
			for ( var i = 1; i <= 800; i++) {
				var amount = Math.floor(Math.random() * 1000);
				var price = Math.floor(Math.random() * 1000);
				rows.push({
					id : 'Inv No ' + i,
					username : $.fn.datebox.defaults.formatter(new Date()),
					account : 'Name ' + i,
					password : amount,
					price : price,
					cost : amount * price,
					note : 'Note ' + i
				});
			}
			return rows;
		}

		function pagerFilter(data) {
			if (typeof data.length == 'number'
					&& typeof data.splice == 'function') { // is array
				data = {
					total : data.length,
					rows : data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage : function(pageNum, pageSize) {
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh', {
						pageNumber : pageNum,
						pageSize : pageSize
					});
					dg.datagrid('loadData', data);
				}
			});
			if (!data.originalRows) {
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}

		$(function() {
			$('#dg').datagrid({
				loadFilter : pagerFilter
			}).datagrid('loadData', getData());
		});
	</script>
</body>
</html>